<template>
  <div class="cart">
    <div class="cart-title">
      <div class="cart-count">3</div>
      <svg
        t="1584094401610"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2108"
        width="16"
        height="16"
      >
        <path
          d="M352.512 832c-35.36 0-64 28.64-64 64s28.64 64 64 64 64-28.64 64-64-28.64-64-64-64z m448 0c-35.36 0-64 28.64-64 64s28.64 64 64 64 64-28.64 64-64-28.64-64-64-64zM864 800H344.224c-46.112 0-86.656-36.48-92.288-83.04l-54.272-382.08-30.88-178.56c-1.92-15.584-16.128-28.32-30.016-28.32H96c-17.664 0-32-14.336-32-32s14.336-32 32-32h40.768c46.688 0 87.68 36.48 93.344 83.04l30.816 177.888 54.496 383.712c1.792 14.848 15.232 27.36 28.8 27.36H864c17.696 0 32 14.304 32 32s-14.304 32-32 32zM384.224 672c-16.608 0-30.656-12.8-31.872-29.664-1.312-17.632 11.936-32.96 29.536-34.24l434.112-32c15.936-0.096 29.376-12.608 31.136-26.848l50.4-288.384c1.28-10.752-1.696-22.528-8.128-29.824-4.128-4.672-9.312-7.04-15.36-7.04H320c-17.664 0-32-14.336-32-32s14.336-32 32-32h554.048c24.448 0 46.912 10.144 63.264 28.608 18.688 21.088 27.264 50.816 23.52 81.632L910.4 558.656C904.96 603.52 864.448 640 818.336 640l-431.744 31.904c-0.8 0.064-1.6 0.096-2.368 0.096z"
          p-id="2109"
          fill="#d81e06"
        />
      </svg>
      我的购物车
    </div>
    <div class="cart-content">
      <img
        src="https://img11.360buyimg.com/uba/jfs/t3571/299/131233948/1117/a1196554/58004d6dN2927f0f7.png"
        alt
      />
      购物车中还没有商品，赶紧选购吧！
    </div>
  </div>
</template>

<style lang="scss">
.cart {
  position: relative;
  &:hover {
    .cart-title {
      position: relative;
      border-color: red;
      &::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -2px;
        display: block;
        width: 100%;
        height: 2px;
        background: #fff;
        z-index: 999;
      }
    }
    .cart-content {
      display: block;
    }
  }
  &-title {
    padding: 10px 20px;
    border: 1px solid #eee;
    color: red;
  }
  &-content {
    position: absolute;
    right: 0;
    display: none;
    padding: 10px 20px;
    width: 400px;
    border: 1px solid red;
    background: #fff;
  }
  svg {
    margin-right: 15px;
  }
  &-count {
    position: absolute;
    padding: 0 7px;
    color: #fff;
    background: red;
    border-radius: 50%;
    transform: translate(10px, -10px);
  }
}
</style>